<template>
  <tr>
    <td>颜色</td>
    <td>
      <!-- 选择颜色 -->
      <div class="radioGroup">
        <div
          class="radioButton"
          @click="handleColor(i.name)"
          :class="{ active: queryParams.color === i.name }"
          v-for="i in detailData.specs[0].values"
          :key="i.name"
        >
          <img :src="i.picture" alt="" />
        </div>
      </div>
    </td>
  </tr>
  <tr v-if="detailData?.specs[1]?.values?.length">
    <td style="display: flex; justify-content: flex-start; width: 35px">尺码</td>
    <td>
      <!-- 选择颜色 -->
      <el-radio-group
        class="radioGroup"
        v-model="queryParams.size"
        @change="handleSize"
        size="small"
      >
        <el-radio-button v-for="i in detailData.specs[1].values" :label="i.name" :key="i.name">{{
          i.name
        }}</el-radio-button>
      </el-radio-group>
    </td>
  </tr>
</template>

<script setup name="ComponentName">
import { reactive, watch } from 'vue'
import { emitter } from '@/utils/emitter'

const props = defineProps({
  detailData: {
    type: Object,
    default: () => {},
  },
})

const queryParams = reactive({
  picture:'',
  skuId: '',
  color: '666',
  size: '',
})

const handleColor = (name) => {
  queryParams.color = name
}
const handleSize = (name) => {
  queryParams.size = name
}
watch(
  queryParams,
  () => {
    if (queryParams.color && queryParams.size) {
      // 筛选出detailData.skus下面对应的颜色、尺码的id
      const item = props.detailData.skus.find((item) => {
        if (
          item.specs[0].valueName === queryParams.color &&
          item.specs[1].valueName === queryParams.size
        ) {
          return item
        }
      })
      queryParams.skuId = item.id
      queryParams.picture = item.picture
      emitter.emit('sku-parmes', queryParams)
    }
  },
  { deep: true },
)
</script>

<style scoped lang="scss">
.active {
  border: 2px solid #27ba9b;
}
tr {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  td {
    font-size: 16px;
    color: #333;
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    .radioGroup {
      display: flex;
      flex-flow: row wrap;
      background: #fff;
      justify-content: flex-start;
      gap: 5px;
      .radioButton {
        background: #eeecec;
        width: 50px;
        height: 50px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
